<template>
	<view class="message-wrap">
		<!-- 头部header -->
		<view class="header">
			<uni-nav-bar :statusBar="true" leftIcon="arrowleft" fixed="true" title="视频监控" @clickLeft="clickLeft"></uni-nav-bar>
		</view>
		<!-- 内容 -->
		<view class="message-content">
			<!-- 通告 -->
			<view class="notice-wrap">
				<uni-notice-bar :show-icon="true" :scrollable="true" :single="true" text="## 第一食堂：有非法人员入侵--2020.10.12 10:00； 提醒：批次号（202010124568875），食品即将到期！## 第二食堂：仓库温湿度异常!">
				</uni-notice-bar>
			</view>
			<!-- 所属食堂 -->
			<view class="affiliated-department-wrap">
				<view>{{departmentName}}</view>
				<view @click="switchDepartment">[切换]</view>
			</view>
			<!-- 所属食堂概况 -->
			<view class="department-general-wrap">
				<department-general ref="general"></department-general>
			</view>
			<!-- 陪餐领导 -->
			<view class="accompany-leader-wrap">
				<accompany-leader ref="accompanyLeader"></accompany-leader>
			</view>
			<!-- 食堂视频监督 -->
			<view class="department-region-wrap">
				<uni-section title="视频监督" type="line"></uni-section>
				<video-supervise ref="videoSupervise" :departmentId="departmentId" @clickItem="clickItem"></video-supervise>
			</view>
			<!-- 相关资证 -->
			<view class="related-aptitude" v-if="relevantList.length > 0">
				<uni-section @click="toRelevantCertify" title="相关资证" type="line" subTitle="查看更多"></uni-section>
				<view class="relevant-content" @click="toRelevantCertify">
					<view class="relevant-item" v-for="(item,index) in relevantList">
						<view class="relevant-img" v-if="item.fileId && item.fileId.length > 0">
							<image class="images" :style="{padding:index === 0 ?'':' 0 25px'}" :src="imgHeaderUrl + item.fileId[0]" :key="imgHeaderUrl + item.fileId[0]">
						</view>
						<view class="relevant-name">{{item.insuranceName}}</view>
					</view>
				</view>
			</view>
			<!-- 在岗人员 / 日巡查清单start -->
			<view class="grid-area-wrap">
				<!-- 在岗人员 -->
				<view class="on-job-container" v-if="totalOnJob > 0" @click="toOnJob">
					<view class="on-job-content">
						<view class="on-job-total-wrap">
							<view class="on-job-icon">
								<!-- <img src="../../" alt=""> -->
								<image src="../../../static/img/dailyInspectionList/personal_avatar.png" mode=""></image>
							</view>
							<view class="on-job-total">
								<text class="on-job-text">在岗人员</text>
								<text>
									<text class="on-job-num">{{totalOnJob}}</text>
									<text>人</text>
								</text>
							</view>
						</view>
						<view class="on-job-certificate-info">
							<view class="certificate-info-wrap">
								<view class="certificate-info-item">
									<view class="certificate-type">即将到期</view>
									<view class="certificate-num">{{dueNumber}}</view>
								</view>
								<view class="certificate-info-item">
									<view class="certificate-type">已到期</view>
									<view class="certificate-num">{{expiredNumber}}</view>
								</view>
							</view>
							<view class="allow-right"></view>
						</view>
					</view>
				</view>
				<!-- 日巡查清单 -->
				<view class="on-job-container" @click="toInspectionList">
					<view class="on-job-content">
						<view class="on-job-total-wrap">
							<view class="on-job-icon">
								<!-- <img src="../../../assets/images/sun_dining/common/resource_icon.png" alt=""> -->
								<image style="padding:0 12rpx" src="../../../static/img/dailyInspectionList/resource_icon.png" mode=""></image>
							</view>
							<view class="on-job-total">
								<text class="on-job-text">日巡查清单</text>
								<text>
									<text class="on-job-num">{{totalNum}}</text>
									<text>条</text>
								</text>
							</view>
						</view>
						<view class="on-job-certificate-info">
							<view class="certificate-info-wrap">
								<view class="certificate-info-item">
									<view class="certificate-type">已完成</view>
									<view class="certificate-num">{{alreadyNum}}</view>
								</view>
								<view class="certificate-info-item">
									<view class="certificate-type">未完成</view>
									<view class="certificate-num">{{totalNum - alreadyNum}}</view>
								</view>
							</view>
							<view class="allow-right"></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 在岗人员 / 日巡查清单end -->
			<!-- 食堂规章制度 -->
			<view class="department-notice-wrap">
				<uni-section title="食堂规章制度" type="line"></uni-section>
				<rules-bylaws :regulationInfo="regulationInfo"></rules-bylaws>
			</view>
			<!-- 食堂公示 -->
			<view class="department-notice-wrap">
				<uni-section @click="more_cl" title="食堂公示" type="line" subTitle="查看更多"></uni-section>
				<view class="single" v-for="(item) in foodList" :key="item.canteenPublicityId" @click="canteenDetail(item.canteenPublicityId)">
					<text class="name">{{item.title}}</text>
					<text class="time">{{item.createTime}}</text>
				</view>
			</view>
		</view>
		<!-- popup-picker -->
		<lb-picker ref="LbPickerREF" :list="list" :props="myProps" @confirm="handleConfirm" v-model="departmentId"></lb-picker>
	</view>
</template>

<script>
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import LbPicker from '@/components/lb-picker/index.vue'
	import VideoSupervise from '@/components/VideoSupervise/VideoSupervise.vue'
	import DepartmentGeneral from '@/components/department-general/department-general.vue'
	import AccompanyLeader from '@/components/accompany-leader/accompany-leader.vue'
	import RulesBylaws from '@/components/rules-bylaws/rules-bylaws.vue'
	import {
		mapActions
	} from 'vuex'
	export default {
		components: {
			uniNoticeBar,
			LbPicker,
			VideoSupervise,
			DepartmentGeneral,
			AccompanyLeader,
			RulesBylaws
		},
		data() {
			return {
				imgHeaderUrl: uni.getStorageSync('imgServerHost') + ':' + uni.getStorageSync('imgServerPort') + '/img/',
				totalOnJob: 0, // 在岗人员总数
				dueList: [], // 即将到期列表
				expiredList: [], // 已到期列表
				totalNum: 0, // 检查总个数
				alreadyNum: 0, // 已检查个数
				orgId: '',
				noticeText: '',
				list: [],
				departmentId: '',
				departmentName: '',
				currentPage: 1,
				pageSize: 5,
				myProps: {
					label: 'departmentName',
					value: 'departmentId'
				},
				relevantList: [],
				contractorId: '',
				contractorName: '',
				contractorList: [],
				regulationInfo: {},
				foodList: []
			}
		},
		onShow() {
			this.orgId = this.$store.getters.orgId
			this.init()
			// this.initPage() // 页面初始化
		},
		computed: {
			dueNumber() {
				return this.dueList.length
			},
			expiredNumber() {
				return this.expiredList.length
			},
		},
		methods: {
			...mapActions(['setContractorId']),
			/**
			 * @description: 点击查看更多在岗人员 详情
			 * @author: LinW
			 * @createDate: 2019-08-06 10:49
			 */
			toOnJob() {
				uni.navigateTo({
					url:`../../onJobDetails/onJobDetails?contractorId=${this.contractorId}&departmentId=${this.departmentId}`
				})
			},
			/**
			 * @description: 日巡查清单
			 * @author: LinW (evan_origin@163.com)
			 * @createDate: 2019-12-30 14:40
			 */
			toInspectionList() {
				console.log(this.contractorId,this.orgId,this.departmentId)
				uni.setStorage({key:'contractorId',data:this.contractorId})
				uni.setStorage({key:'orgId',data:this.orgId})
				uni.setStorage({key:'departmentId',data:this.departmentId})
				uni.navigateTo({
					url:`../../dailyInspectionList/dailyInspectionList?inspectMenuId=${this.inspectMenuId}&bol=false`
				})
			},
			/**
			 * @description: 获取相关质证（获取许可证和保险的两个请求并发处理）
			 * @author: LinW
			 * @createDate: 2019-08-07 10:34
			 * @param: mod
			 * @return:
			 */
			async getRelevantInfoFunc() {
				console.log('获取相关资证')
				let params = {
					orgId: this.contractorId,
					departmentId: this.departmentId
				}
				this.$request.getLicenseInfo(params).then(res => {
					console.log(res, '22323232爱上大声地')
				})
				let License = this.$request.getLicenseInfo(params)
				let insurance = this.$request.getInsuranceInfo(params)
				return Promise.all([License, insurance]).then(res => {
					const data = res

					this.relevantList.length = 0 // 置空数组
					if (!this.$utils.isEmptyObject(data[0])) {
						let LicenseObj = {}
						LicenseObj.fileId = data[0].licenseInfoResultApiModel.fileId
						LicenseObj.insuranceName = '食品经营许可证'
						this.relevantList.push(LicenseObj)
					}
					if (data[1] && data[1].length > 0) {
						this.relevantList = this.relevantList.concat(data[1][0])
					}
					console.log(this.imgHeaderUrl + this.relevantList[1].fileId[0])
				})
			},
			/**
			 * @description: 查看相关资质
			 * @author: LinW (xuebingchuan_20@163.com)
			 * @createDate: 2020-10-10 10:40
			 */
			toRelevantCertify() {
				uni.navigateTo({
					url: `../../relevantDepartments/relevantDepartments?contractorId=${this.contractorId}`
				})
			},
			/**
			 * @description: 查看食堂公示详情
			 * @author: LinW (xuebingchuan_20@163.com)
			 * @createDate: 2020-10-10 10:40
			 */
			canteenDetail(canteenPublicityId) {
				uni.navigateTo({
					url: `../../foodAdvertiseMore/foodAdvertisingDetail/foodAdvertisingDetail?id=${canteenPublicityId}`
				})
			},
			/**
			 * @description: 查看更多食堂公示
			 * @author: LinW (xuebingchuan_20@163.com)
			 * @createDate: 2020-10-10 10:40
			 */
			more_cl() {
				uni.navigateTo({
					url: '../../foodAdvertiseMore/foodAdvertiseMore'
				})
				// let params = {
				//     page: this.currentPage,
				//     pageSize: this.pageSize,
				//     departmentId: this.departmentId,
				//     orgId: this.contractorId
				//     }
				// this.$request.ygstCanteenListGet(params).then(res => {
				//  this.foodList = res.list
				// })
			},

			clickLeft() {
				uni.navigateBack()
			},
			/**
			 * @description: 日巡查清单
			 * @author: LinW (evan_origin@163.com)
			 * @createDate: 2019-11-13 11:36
			 * @param: departmentId 食堂ID
			 * @param: orgId 承包商ID
			 */
			async getDeptInspectMenu() {
				let params = {
					orgId: this.contractorId,
					departmentId: this.departmentId
				}
				return this.$request.ygstInspectMenuDeptGet(params).then(res => {
					console.log('res', res)
					if (!this.$utils.isEmptyObject(res)) {
						this.alreadyNum = res.alreadyNum
						this.totalNum = res.totalNum
						this.inspectMenuId = res.inspectMenuId // 主键
					}
				})
			},
			/**
			 * @description: 获取在岗人员信息
			 * @author: LinW
			 * @createDate: 2019-08-05 10:41
			 */
			async getOnPostInfoFunc() {
				let params = {
					contractorId: this.contractorId,
					departmentId: this.departmentId
				}
				return this.$request.ygstEmployeeOnpostDeptcontraListGet(params).then(res => {
					const data = res
					// 置空后再赋值
					this.totalOnJob = []
					if (data && data.length > 0) {
						this.totalOnJob = res.length
						data.forEach(item => {
							if (item.status === '1') {
								this.dueList.push(item)
							}
							if (item.status === '0') {
								this.expiredList.push(item)
							}
						})
					}
				}).catch(e => {
					console.log(e)
				})
			},
			async init() {
				console.log('获取食堂数据')
				await this.getTodayExceptionList('init')
				await this.getRelevantInfoFunc()
				//获取在岗人员信息
				await this.getOnPostInfoFunc()
				await this.getDeptInspectMenu()

			},
			async getTodayExceptionList(type) {
				let orgId = this.orgId
				await this.$request.getTodayExceptionCountList({
					orgId
				}).then(async res => {
					this.list = res || []
					if (type === 'init') {
						this.departmentName = this.list[0].departmentName
						this.departmentId = this.list[0].departmentId
					}
					await this.getContractorInfo(this.departmentId)

					this.$refs.videoSupervise.getVidoeProfileList(this.departmentId)
					this.$refs.general.getTodayHandleInfo(this.departmentId, this.departmentName)
					this.$refs.accompanyLeader.getTodayLeadInfoFunc(this.departmentId)
				}).catch(e => {
					console.error('食堂异常数列', e)
				})
			},
			switchDepartment() {
				this.$refs.LbPickerREF.show()
			},
			/**
			 * @description: 获取承包商信息(默认选择第一项)
			 * @author: LinW (evan_origin@163.com)
			 * @createDate: 2020-01-02 10:40
			 */
			async getContractorInfo(departmentId) {
				let params = {
					departmentId
				}
				await this.$request.ygstConstramanageContraListGet(params).then(res => {
					console.log('res _+_~~+_+~', res)
					if (res.list && res.list.length > 0) {
						this.contractorId = res.list[0].contractorId
						uni.setStorage('contractorId', this.contractorId);
						uni.setStorage('departmentId', this.departmentId);
						let params = {
							page: this.currentPage,
							pageSize: this.pageSize,
							departmentId: this.departmentId,
							orgId: this.contractorId
						}
						this.$request.ygstCanteenListGet(params).then(res => {
							this.foodList = res.list
						})
						this.contractorName = res.list[0].contractorName
						let middle = []
						res.list.forEach(item => {
							middle.push({
								'name': item.contractorName,
								'value': item.contractorId
							})
						})
						this.contractorList = [middle]
						this.setContractorId(this.contractorId)
						this.getRegulation()
					}
					console.log('contractorId', this.contractorId)
					console.log('contractorName', this.contractorName)
				})
			},
			/**
			 * @description: 食堂规章制度管理
			 * @author: LinW (evan_origin@163.com)
			 * @createDate: 2019-11-14 9:06
			 */
			getRegulation() {
				let params = {
					orgId: this.contractorId
				}
				this.$request.ygstRegulationGet(params).then(res => {
					console.log('res规章制度----', res)
					let reg = /<[^<>]+>/g
					if (res.regulationContent) {
						res.regulationContent = res.regulationContent.replace(reg, '')
					}
					this.regulationInfo = res
				})
			},
			handleConfirm(e) {
				let {
					departmentName,
					departmentId
				} = e.item
				this.departmentName = departmentName
				this.departmentId = departmentId
				this.getTodayExceptionList()
				this.$refs.videoSupervise.getVidoeProfileList(this.departmentId)
				this.$refs.general.getTodayHandleInfo(this.departmentId, this.departmentName)
				this.$refs.accompanyLeader.getTodayLeadInfoFunc(this.departmentId)
			},
			clickItem(value) {
				uni.navigateTo({
					url: `/pages/videoDetails/videoDetails?${value}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.message-wrap {
		.message-content {
			// background-color: #f8f8f8;

			// 食堂公示
			.department-notice-wrap {
				.single {
					display: flex;
					flex-direction: column;
					padding-left: 20rpx;
					border-bottom: 1px solid #CCCCCC;

					.name {}

					.time {
						font-size: 12rpx;
						color: #CCCCCC;
					}
				}
			}

			/*在岗人员和日巡查清单*/
			.grid-area-wrap {
				box-sizing: border-box;
				padding: 2px 10px;
				width: 100%;
				margin-top: 12px;
				background-color: #fff;

				.on-job-container:nth-of-type(2) {
					border-top: 1px solid #C1C1C1;
				}

				.on-job-container {
					.on-job-content {
						width: 100%;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 24rpx;
						font-size: 14rpx;

						.on-job-total-wrap {
							width: 50%;
							flex: 0 0 55%;
							// padding-right: 10px;
							display: flex;
							justify-content: space-between;
							align-items: center;
							position: relative;

							.on-job-icon {
								flex: 0 0 50%;

								image {
									box-sizing: border-box;
									width: 80rpx;
									height: 60rpx;
									object-fit: scale-down;
								}
							}

							.on-job-total {
								flex: 1;
								display: flex;
								flex-direction: column;

								.on-job-text {
									font-size: 28rpx;
									color: #706F6F;
									padding: 6px 0px;
								}

								.on-job-num {
									font-size: 48rpx;
									font-weight: bold;
									color: #44D696;
								}
							}

							&:after {
								content: '';
								clear: both;
								display: block;
								width: 1px;
								height: 70%;
								background-color: #C1C1C1;
								position: absolute;
								top: 20%;
								right: 0px;
							}
						}

						.on-job-certificate-info {
							flex: 1;
							padding-left: 20px;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.certificate-info-wrap {
								flex: 0 0 70%;

								.certificate-info-item {
									padding: 6px 0px;
									display: flex;
									justify-content: space-between;
									align-items: center;

									.certificate-type {
										font-size: 26rpx;
										color: #2b2b2b;
									}

									.certificate-num {
										text-align: right;
										font-size: 26rpx;
										font-weight: bold;
										color: #c1c1c1;
									}
								}
							}

							.allow-right {
								width: 30rpx;
								height: 60rpx;
								background-image: url('../../../static/img/dailyInspectionList/allow_right.png');
								background-size: 100% 100%;
							}
						}
					}
				}
			}

			/* 相关资证  */
			.related-aptitude {
				margin-top: 24rpx;
				background-color: #fff;

				.relevant-content {
					overflow: hidden;
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: center;

					.relevant-item {
						width: 50%;
						float: left;
						text-align: center;
						padding: 28rpx;
						box-sizing: border-box;

						.relevant-name {
							font-size: 26rpx;
							font-weight: bold;
							color: #6F6F6F;
						}

						.relevant-img {
							width: 220rpx;
							height: 158rpx;
							margin: 0px auto 20rpx;

							.images {
								width: 100%;
								height: 100%;
								object-fit: scale-down;
								box-sizing: border-box;
							}
						}
					}
				}
			}

			.affiliated-department-wrap {
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				margin: 20rpx auto;
				padding: 20rpx 36rpx;
				color: #fff;
				font-size: 34rpx;
				background-color: #09BB07;
			}

			.department-region-wrap {
				width: 100%;
				box-sizing: border-box;
			}
		}
	}
</style>
